<template>
    <div>
        <van-tabs v-model="active" color="#1989fa" @change="onchange" sticky animated swipeable line-width="25%"
            offset-top="50">

            <!-- 待办 -->
            <van-tab title="我的待办">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list id='toDoList' v-model="loading" :finished="finished"
                        :finished-text='!haveToDoError ? "没有更多数据" : ""' :error-text="todoErrorMessage" @load="onLoad"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list" :key="index" @click="todetail(index, item, '1')">
                            <div class="titlefont"> {{ item.title }}</div>
                            <div class="infosfont"> 发起人:{{ item.disName }}</div>
                            <div class="infosfont"> 发起人组织:{{ item.belongOrg }}</div>
                            <div class="infosfont"> 发起时间:{{ timeUtil(item.modifiedTime) }}</div>
                        </van-cell>

                        <!-- 无数据 -->
                        <div v-show="!haveTodoData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('todo')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                暂无数据！
                            </div>
                        </div>

                        <!-- 获取数据失败 -->
                        <div v-show="haveToDoError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('todo')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>

            <!-- 已办 -->
            <van-tab title="我的已办">
                <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" immediate-check="false">
                    <van-list id='doneList' v-model="loading2" :finished="finished2"
                        :finished-text='!haveDoneError ? "没有更多数据" : ""' :error-text="doneErrorMessage" @load="onLoad2"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list2" :key="index" @click="todetail(index, item, '2')">
                            <div class="titlefont"> {{ item.title }}</div>
                            <div class="infosfont"> 发起人:{{ item.disName }}</div>
                            <div class="infosfont"> 发起人组织:{{ item.belongOrg }}</div>
                            <div class="infosfont"> 发起时间:{{ timeUtil(item.modifiedTime) }}</div>
                        </van-cell>
                        <div v-show="!haveDoneData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('did')" />

                        </div>
                        <div v-show="haveDoneError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('did')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>

            <!-- 草稿箱 -->
            <van-tab title="我的草稿">
                <van-pull-refresh v-model="refreshing3" @refresh="onRefresh3" immediate-check="false">
                    <van-list id='draftList' v-model="loading3" :finished="finished3"
                        :finished-text='!haveDraftError ? "没有更多数据" : ""' :error-text="draftErrorMessage" @load="onLoad3"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list3" :key="index" @click="todetail(index, item, '3')">
                            <div class="titlefont"> {{ item.title }}</div>
                            <div class="infosfont"> 创建时间:{{ item.createdTime }}</div>
                            <div class="infosfont"> 最后一次修改时间:{{ item.modifiedTime }}</div>
                        </van-cell>
                        <div v-show="!haveDraftData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('draw')" />

                        </div>
                        <div v-show="haveDraftError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('draw')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>

                </van-pull-refresh>
            </van-tab>


            <!-- 我发起的任务 -->
            <van-tab title="我发起的任务">
                <van-pull-refresh v-model="refreshing5" @refresh="onRefresh5" immediate-check="false">
                    <van-list id='wfqdList' v-model="loading5" :finished="finished5"
                        :finished-text='!haveWFQDError ? "没有更多数据" : ""' :error-text="wfqdErrorMessage" @load="onLoad5"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list5" :key="index" @click="pushMineIssueDetailView(item)">
                            <div class="titlefont"> {{ item.title }}</div>
                            <div class="infosfont"> 填报状态:{{ item.isSubmitNumber == item.numbers ?'已完成':'填报中' }}</div>
                            <div class="infosfont"> 完成进度:  {{ item.isSubmitNumber }}/{{ item.numbers }}</div>
                            <div class="infosfont"> 发起时间:{{ timeUtil(item.createdTime) }}</div>
                            <div class="infosfont"> 截止时间:{{ item.endTime }}</div>
                        </van-cell>
                        <div v-show="!haveDraftData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('draw')" />
                        </div>
                        <div v-show="haveDraftError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('draw')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>

                </van-pull-refresh>
            </van-tab>

            <!-- 我的派发 -->
            <!-- <van-tab title="我的派发">
                <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" immediate-check="false">
                    <van-list id='paifaList' v-model="loading2" :finished="finished2"
                        :finished-text='!haveDoneError ? "没有更多数据" : ""' :error-text="doneErrorMessage" @load="onLoad2"
                        style="margin-bottom: 50px;">
                        <van-cell v-for="(item, index) in list2" :key="index" @click="todetail(index, item, '2')">
                            <div class="titlefont"> {{ item.receiptTitle }}</div>
                            <div class="infosfont"> 创建部门:{{ item.createOrgName }}</div>
                            <div class="infosfont"> 创建人:{{ item.createUserName }}</div>
                            <div class="infosfont"> 办理时间:{{ timeUtil(item.previousAssistantDate) }}</div>
                        </van-cell>
                        <div v-show="!haveDoneData" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                                style="margin: 120px 50px 0" @click="getListdata('did')" />

                        </div>
                        <div v-show="haveDoneError" class="text-c">
                            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                                alt="获取数据失败" style="margin: 120px 50px 0" @click="getListdata('did')" />
                            <div class="color-b font14" style="margin: 20px 0 0 15px">
                                获取数据失败!
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab> -->
        </van-tabs>

    </div>
</template>



<script>
import { getToDoList, getDoneList, getDraftList, getPaifaList } from "@/api/zsapi";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name: 'dwdyytTable0',
    data() {
        return {
            active: 0,

            list: [],
            list2: [],
            list3: [],
            list4: [],
            list5: [],

            refreshing: false,
            loading: false,
            finished: false,

            refreshing2: false,
            loading2: false,
            finished2: false,

            refreshing3: false,
            loading3: false,
            finished3: false,

            refreshing4: false,
            loading4: false,
            finished4: false,

            refreshing5: false,
            loading5: false,
            finished5: false,

            searchTitle: '',

            getToDoListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            getDoneListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            getDraftListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            getPaifaListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            getWFQDListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },

            maxPageToDo: 100,
            maxPageDone: 100,
            maxPageDraft: 100,
            maxPagePaifa: 100,
            maxPageWFQD: 100,

            todoErrorMessage: '',
            doneErrorMessage: '',
            draftErrorMessage: '',
            paifaErrorMessage: '',
            wfqdErrorMessage: '',

            haveTodoData: true,
            haveDoneData: true,
            haveDraftData: true,
            havePaifaData: true,
            haveWFQDData: true,

            haveToDoError: false,
            haveDoneError: false,
            haveDraftError: false,
            havePaifaError: false,
            haveWFQDError: false
        }
    },

    /// 不知道啥意思
    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),
        ...mapGetters(["hassetmenu"]),
    },

    /// 一个页面 激活 后的钩子函数
    activated() {

        let dom = document.getElementById('toDoList');
        if (dom != null) {
            if (dom.scrollTop > 0) {
                dom.scrollTop = 0;
            }
        }

        let dom2 = document.getElementById('doneList');
        if (dom2 != null) {
            if (dom2.scrollTop > 0) {
                dom2.scrollTop = 0;
            }
        }

        let dom3 = document.getElementById('draftList');
        if (dom3 != null) {
            if (dom3.scrollTop > 0) {
                dom3.scrollTop = 0;
            }
        }

        let dom4 = document.getElementById('paifaList');
        if (dom4 != null) {
            if (dom4.scrollTop > 0) {
                dom4.scrollTop = 0;
            }
        }
    },

    /// 创建完成
    created() {

    },

    /// 挂载完成
    mounted() {
        if (localStorage.getItem('zsToDoNumber') != '' &&
            localStorage.getItem('zsToDoNumber')) {

            this.active = JSON.parse(localStorage.getItem('zsToDoNumber'))
            this.onchange(this.active);
            if (this.active == 0) {
                this.active = 0;
            } else if (this.active == 1) {
                this.active = 1;
            } else if (this.active == 2) {
                this.active = 2;
            } else if (this.active == 3) {
                this.active = 3;
            } else {
                this.active = 0;
            }
            localStorage.setItem('zsToDoNumber', '')
        }
    },

    /// 所有的 方法
    methods: {

        /// 查询
        setsearchdata(title) {
            console.log('11111111')
            this.searchTitle = title;
            if (this.active == 0) {
                this.onRefresh();
            }
            else if (this.active == 1) {
                this.onRefresh2();
            }
            else if (this.active == 2) {
                this.onRefresh3();
            } else if (this.active == 3) {
                this.onRefresh4();
            }
        },
        /// 
        onchange(index) {
            console.log('onchange')
            this.searchTitle = '';
        },
        /// 待办 刷新
        onRefresh() {
            //清空列表数据
            this.finished = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading = true;
            this.refreshing = true;
            this.getToDoListQuery.page = 1;
            this.maxPageToDo = 100;
            this.onLoad();
        },

        /// 已办 刷新
        onRefresh2() {
            //清空列表数据
            this.finished2 = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading2 = true;
            this.refreshing2 = true;
            this.getDoneListQuery.page = 1;
            this.maxPageDone = 100;
            this.onLoad2();
        },

        /// 草稿箱 刷新
        onRefresh3() {
            //清空列表数据
            this.finished3 = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading3 = true;
            this.refreshing3 = true;
            this.getDraftListQuery.page = 1;
            this.maxPageDraft = 100;
            this.onLoad3();
        },

        /// 派发列表 刷新
        onRefresh4() {
            //清空列表数据
            this.finished4 = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading4 = true;
            this.refreshing4 = true;
            this.getPaifaListQuery.page = 1;
            this.maxPagePaifa = 100;
            this.onLoad4();
        },

        /// 我发起的任务 刷新
        onRefresh5() {
            //清空列表数据
            this.finished5 = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading5 = true;
            this.refreshing5 = true;
            this.getWFQDListQuery.page = 1;
            this.maxPageWFQD = 100;
            this.onLoad5();
        },

        /// 装载、输入（文件）
        onLoad() {
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false
            }
            if (this.getToDoListQuery.page <= this.maxPageToDo) {
                getToDoList(Object.assign(this.getToDoListQuery,
                    { userName: this.user.userName },
                    { searchTitle: this.searchTitle },
                ))
                    .then((result) => {
                        this.haveToDoError = false;
                        if (!result.data) {
                            this.loading = false;
                            this.finished = true;
                            Notify(result.message);
                            this.todoErrorMessage = result.message;
                            return;
                        }
                        let listdetails = this.list;
                        if (this.getToDoListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }

                            if (listdetails.length == 0) {
                                this.haveTodoData = false;
                            }
                            else {
                                this.haveTodoData = true;
                            }

                            this.maxPageToDo = result.data.data.totalPages;
                        }
                        else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }

                        this.list = listdetails;
                        this.loading = false;
                        this.getToDoListQuery.page = this.getToDoListQuery.page + 1;
                    })
                    .catch((error) => {
                        console.log("22222222222" + JSON.stringify(error));
                        this.loading = false
                        this.finished = true;
                        this.haveTodoData = true;
                        this.todoErrorMessage = '获取数据失败,请稍后重试';
                        this.haveToDoError = true,
                            Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    });
            }
            else {
                this.loading = false
                this.finished = true;
            }
        },

        /// 
        onLoad2() {
            if (this.refreshing2) {
                this.list2 = [];
                this.refreshing2 = false;
            }
            if (this.getDoneListQuery.page <= this.maxPageDone) {
                getDoneList(Object.assign(this.getDoneListQuery,
                    { userName: this.user.userName },
                    { searchTitle: this.searchTitle },
                ))
                    .then((result) => {
                        this.haveDoneError = false;
                        if (!result.data) {
                            this.loading2 = false;
                            this.finished2 = true;
                            Notify(result.message);
                            this.doneErrorMessage = result.message;
                            return;
                        }
                        let listdetails = this.list2;
                        if (this.getDoneListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }
                            if (listdetails.length == 0) {
                                this.haveDoneData = false;
                            } else {
                                this.haveDoneData = true;
                            }
                            this.maxPageDone = result.data.data.totalPages;
                        } else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        this.list2 = listdetails;
                        this.loading2 = false;
                        this.getDoneListQuery.page = this.getDoneListQuery.page + 1;
                    })
                    .catch((error) => {
                        this.haveDoneError = true;
                        this.haveDoneData = true;
                        this.loading2 = false
                        this.finished2 = true;
                        this.doneErrorMessage = '获取数据失败,请稍后重试';
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    })
            } else {
                this.loading2 = false
                this.finished2 = true;
            }
        },

        ///
        onLoad3() {
            if (this.refreshing3) {
                this.list3 = [];
                this.refreshing3 = false;
            }
            if (this.getDraftListQuery.page <= this.maxPageDraft) {
                getDraftList(Object.assign(this.getDraftListQuery,
                    { userName: this.user.userName },
                    { searchTitle: this.searchTitle },
                ))
                    .then((result) => {
                        this.haveDraftError = false;
                        if (!result.data) {
                            this.loading3 = false;
                            this.finished3 = true;
                            Notify(result.message);
                            this.draftErrorMessage = result.message;
                            return;
                        }
                        let listdetails = this.list3;
                        if (this.getDraftListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }
                            if (listdetails.length == 0) {
                                this.haveDraftData = false;
                            } else {
                                this.haveDraftData = true;
                            }
                            this.maxPageDraft = result.data.data.totalPages;
                        } else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        this.list3 = listdetails;
                        this.loading3 = false;
                        this.getDraftListQuery.page = this.getDraftListQuery.page + 1;
                    })
                    .catch((error) => {
                        this.haveDraftError = true;
                        this.haveDraftData = true;
                        this.loading3 = false
                        this.finished3 = true;
                        this.draftErrorMessage = '获取数据失败,请稍后重试';
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    })
            } else {
                this.loading3 = false
                this.finished3 = true;
            }
        },

        onLoad4() {
            if (this.refreshing4) {
                this.list4 = [];
                this.refreshing4 = false;
            }
            if (this.getPaifaListQuery.page <= this.maxPagePaifa) {
                getPaifaList(Object.assign(this.getPaifaListQuery,
                    { userName: this.user.userName },
                    { searchTitle: this.searchTitle },
                ))
                    .then((result) => {
                        this.havePaifaError = false;
                        if (!result.data) {
                            this.loading4 = false;
                            this.finished4 = true;
                            Notify(result.message);
                            this.paifaErrorMessage = result.message;
                            return;
                        }
                        let listdetails = this.list4;
                        if (this.getPaifaListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }
                            if (listdetails.length == 0) {
                                this.havePaifaData = false;
                            } else {
                                this.havePaifaData = true;
                            }
                            this.maxPagePaifa = result.data.data.totalPages;
                        } else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        this.list4 = listdetails;
                        this.loading4 = false;
                        this.getPaifaListQuery.page = this.getPaifaListQuery.page + 1;
                    })
                    .catch((error) => {
                        this.havePaifaError = true;
                        this.havePaifaData = true;
                        this.loading4 = false
                        this.finished4 = true;
                        this.paifaErrorMessage = '获取数据失败,请稍后重试';
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    })
            } else {
                this.loading4 = false
                this.finished4 = true;
            }
        },

        onLoad5() {
            if (this.refreshing5) {
                this.list5 = [];
                this.refreshing5 = false;
            }

            if (this.getWFQDListQuery.page <= this.maxPageWFQD) {
                getPaifaList(Object.assign(this.getWFQDListQuery, { userName: this.user.userName }, { searchTitle: this.searchTitle })).then((result) => {
                    
                        this.haveWFQDError = false;
                        if (!result.data) {
                            this.loading5 = false;
                            this.finished5 = true;
                            Notify(result.message);
                            this.wfqdErrorMessage = result.message;
                            return;
                        }

                        let listdetails = this.list5;
                        if (this.getWFQDListQuery.page == 1) {
                            listdetails = [];
                            if (result.data.data.content) {
                                listdetails = result.data.data.content;
                            }
                            if (listdetails.length == 0) {
                                this.haveWFQDData = false;
                            } else {
                                this.haveWFQDData = true;
                            }
                            this.maxPageWFQD = result.data.data.totalPages;
                        } else {
                            if (result.data.data.content) {
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        this.list5 = listdetails;
                        this.loading5 = false;
                        this.getWFQDListQuery.page = this.getWFQDListQuery.page + 1;
                    })
                    .catch((error) => {
                        this.haveWFQDError = true;
                        this.haveWFQDData = true;
                        this.loading5 = false
                        this.finished5 = true;
                        this.wfqdErrorMessage = '获取数据失败,请稍后重试';
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    })
            } else {
                this.loading5 = false
                this.finished5 = true;
            }
        },




        timeUtil(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },

        getListdata(value) {
            if (value = 'todo') {
                this.onRefresh();
            } else if (value = 'did') {
                this.onRefresh2();
            } else if (value = 'draw') {
                this.onRefresh3();
            } else {
                this.onRefresh4();
            }
        },

        /// 跳转 我发布的 详情
        pushMineIssueDetailView(value) {

            this.$router.push(
                {
                    name: 'wfqdDetailView',
                    query: {
                        orderUuid: value.orderUuid
                    }
                }
            )
        },

        /// 跳转详情
        todetail(index, value, istodo) {

            if (istodo == '1') {

                /// 待办
                localStorage.setItem('zsToDoNumber', 0)
                var todoType = '1';
                var workFlag = 'task';
            }
            else if (istodo == '2') {

                /// 已办
                localStorage.setItem('zsToDoNumber', 1)
                var todoType = '2';
                var workFlag = 'join';
            }
            else if (istodo == '3') {

                /// 草稿箱
                localStorage.setItem('zsToDoNumber', 2)
                var todoType = '3';
                var workFlag = 'draft';
            } 
            else if (istodo == '4') {

                /// 我的派发
                localStorage.setItem('zsToDoNumber', 2)
                var todoType = '4';
                var workFlag = 'paifa';
            }

            if (istodo == '3') {
                this.$router.push(
                    {
                        name: 'zsdetailview',
                        query: {
                            id: value.id,
                            todoType: '3',
                            isdraw: '1',
                            disType: value.disType,
                        }
                    }
                )
            }
            else {
                this.$router.push(
                    {
                        name: 'zsdetailview',
                        query: {
                            location: value.activityDefId,
                            id: value.id,
                            processDefName: value.processDefName,
                            workItemId: value.workItemId,
                            pmInsId: value.receiptCode,
                            workFlag: workFlag,
                            todoType: todoType,
                            isdraw: '0',
                            disType: value.disType,
                        }
                    }
                )
            }
        }
    }
}



</script>


<style scoped>
.btn {
    margin-bottom: 60px;
    margin-top: 60px;
}

.titlefont {
    font-size: 15px;
}

.infosfont {
    font-size: 12px;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>